<template>
  <div>
    <vxe-table
      ref="xTable"
      :data="tableData"
      size="mini"
      stripe
      class="ops-stripe-table"
      show-overflow
      :edit-config="{ showIcon: false, trigger: 'manual', mode: 'row' }"
    >
      <vxe-column v-for="col in columns" :key="col.field" :field="col.field" :title="col.title" :edit-render="{}">
        <template #header> <span v-if="col.required" :style="{ color: 'red' }">* </span>{{ col.title }} </template>
        <template #edit="{ row }">
          <vxe-input v-model="row[col.field]" type="text"></vxe-input>
        </template>
      </vxe-column>
      <vxe-column title="操作" width="80" v-if="!disabled">
        <template #default="{ row }">
          <template v-if="$refs.xTable.isActiveByRow(row)">
            <a @click="saveRowEvent(row)"><a-icon type="save"/></a>
          </template>
          <a-space v-else>
            <a @click="editRowEvent(row)"><ops-icon type="icon-xianxing-edit"/></a>
            <a style="color:red" @click="deleteRowEvent(row)"><ops-icon type="icon-xianxing-delete"/></a>
          </a-space>
        </template>
      </vxe-column>
    </vxe-table>
    <div :style="{ color: '#f5222d' }" v-if="errorFlag">请完整填写机器人配置</div>
    <a-button
      v-if="!disabled"
      icon="plus-circle"
      class="ops-button-primary"
      type="primary"
      @click="insertEvent"
    >添加</a-button
    >
  </div>
</template>

<script>
export default {
  name: 'Bot',
  props: {
    columns: {
      type: Array,
      default: () => [
        {
          field: 'name',
          title: '名称',
          required: true,
        },
        {
          field: 'url',
          title: 'Webhook地址',
          required: true,
        },
      ],
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      tableData: [],
      errorFlag: false,
    }
  },
  methods: {
    async insertEvent() {
      const $table = this.$refs.xTable
      const record = {
        name: '',
        url: '',
      }
      const { row: newRow } = await $table.insertAt(record, -1)
      await $table.setActiveRow(newRow)
    },
    saveRowEvent(row) {
      const $table = this.$refs.xTable
      $table.clearActived()
    },
    editRowEvent(row) {
      const $table = this.$refs.xTable
      $table.setActiveRow(row)
    },
    deleteRowEvent(row) {
      const $table = this.$refs.xTable
      $table.remove(row)
    },
    getData(callback) {
      const $table = this.$refs.xTable
      const { fullData: _tableData } = $table.getTableData()
      const requiredObj = {}
      this.columns.forEach((col) => {
        if (col.required) {
          requiredObj[col.field] = true
        }
      })
      let flag = true
      _tableData.forEach((td) => {
        Object.keys(requiredObj).forEach((key) => {
          if (requiredObj[key]) {
            flag = !!(flag && td[`${key}`])
          }
        })
      })
      this.errorFlag = !flag
      callback(flag, _tableData)
    },
    setData(value) {
      this.tableData = value
      this.errorFlag = false
    },
  },
}
</script>

<style></style>
